﻿@{
    ViewBag.Title = "Entity Relationship Designer";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}

<link href="~/Content/css/graph.css" rel="stylesheet" />
<link href="~/Content/css/erd.css" rel="stylesheet" />

<script src="~/Content/js/ERD/ERDEnums.js"></script>
<script src="~/Content/js/ERD/ERDViewModel.js"></script>
<script src="~/Content/js/ERD/ERDGraph.js"></script>
<script src="~/Content/js/ERD/ERD.js"></script>

<script type="text/javascript">
    $(document).ready(function ()
    {
        var erd = new ERD(
            {
                el: $('#erdDesigner'),
                serviceUrl: '@Url.Content("~/api")'
            });
    });
</script>

<div id="erdDesigner">
    <div class="row-fluid">
        <div class="span9">
            @* Graph *@
            <div id="erd-graph" class="erd-graph">
                <div class="erd-graph-toolbar">
                    <ul class="erd-graph-domains" data-bind="foreach: fk.domains">
                        <!-- ko if: UI.graphVisible() -->
                           <li>
                               <span class="erd-graph-domain-actions">
                                   <i class="icon-circle-arrow-right icon-white" data-bind="click: UI.toggleGraphVisible"></i>
                               </span>
                               <p class="erd-graph-domain-name" data-bind="click: UI.select">
                                   <span data-bind="text: attr.Name"></span>
                               </p>                               
                           </li>
                        <!-- /ko -->
                    </ul>
                </div>
                @* Domains *@
                <div data-bind="foreach: fk.domains">
                    <!-- ko if: UI.graphVisible() -->
                        @* Entities *@
                        <div class="graph-nodes" data-bind="foreach: fk.entities">
                            <!-- ko if: UI.graphVisible() -->
                                @* Entity *@
                                <div class="graph-node erd-entity" data-bind="attr: { id: UI.entityElId }" style="position:absolute;">
                                    @* Entity Header *@
                                    <div class="graph-node-header">
                                        <span class="graph-node-header-actions">
                                            <i class="icon-circle-arrow-right icon-white" data-bind="click: UI.toggleGraphVisible"></i>
                                        </span>
                                        <p class="graph-node-header-name" data-bind="click: UI.select">
                                            <span data-bind="text: attr.Name"></span>
                                        </p>                                        
                                    </div>
                                    @* Entity Attributes *@
                                    <div class="graph-node-attributes">
                                        <table class="table-condensed table-hover" data-bind="foreach: fk.attributes" style="width:100%;">
                                            <tr>
                                                <td class="graph-node-attribute">
                                                    <span class="graph-node-attribute-name" data-bind="text: attr.Name"></span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            <!-- /ko -->
                        </div>
                    <!-- /ko -->
                </div>
            </div>
        </div>
        <div class="span3">
            <div class="tabsContainer">
                <div class="tabsContainer-group">
                    <ul class="tabsContainer-tabs">
                        <li><a href="#erd-tab-designerContents">Designer</a></li>
                        <li><a href="#erd-tab-other">Other</a></li>
                    </ul>
                    @* Designer Contents Tab *@
                    <div id="erd-tab-designerContents" class="tabsContainer-tab">
                        @* Designer Contents Header *@
                        <div class="tabsContainer-tab-header">
                            <span>Designer contents</span>
                        </div>
                        @* Designer Contents Body *@
                        <div class="tabsContainer-tab-body" style="height:350px;">
                            @* Domains *@
                            <ul class="treeContainer" data-bind="foreach: fk.domains">
                                <li>
                                    <div class="treeContainer-node">
                                        <span class="treeContainer-node-actions-left">
                                            <i class="icon-white" 
                                                data-bind="click: UI.toggleGraphVisible, css: { 'icon-circle-arrow-left': UI.graphVisible() != true, 'icon-circle-arrow-right': UI.graphVisible() == true }"></i>
                                        </span>
                                        <p class="treeContainer-node-name" data-bind="event: { click: $data.UI.toggleDetailsVisible }">
                                            <span data-bind="text: UI.name"></span>
                                        </p>                                    
                                    </div>
                                    @* Entities *@
                                    <ul class="treeContainer-padded" data-bind="foreach: fk.entities, visible: UI.detailsVisible">
                                        <li>
                                            <div class="treeContainer-node">
                                                <span class="treeContainer-node-actions-left">
                                                    <i class="icon-white" 
                                                        data-bind="click: UI.toggleGraphVisible, css: { 'icon-circle-arrow-left': UI.graphVisible() != true, 'icon-circle-arrow-right': UI.graphVisible() == true }"></i>
                                                </span>
                                                <p class="treeContainer-node-name" data-bind="event: { click: $data.UI.toggleDetailsVisible }">
                                                    <span data-bind="text: attr.Name"></span>
                                                </p>                                    
                                            </div>
                                            <ul class="treeContainer-padded" data-bind="visible: UI.detailsVisible">
                                                @* Attributes *@
                                                <li>
                                                    <div class="treeContainer-node">
                                                        <p class="treeContainer-node-name" data-bind="click: UI.toggleAttributesVisible">
                                                            <span>Attributes</span>
                                                        </p>                                    
                                                    </div>
                                                    <ul data-bind="foreach: fk.attributes, visible: UI.attributesVisible">
                                                        <li>
                                                            <div class="treeContainer-node">
                                                                <p class="treeContainer-node-name">
                                                                    <span data-bind="text: attr.Name"></span>
                                                                </p>                                    
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </li>
                                                @* Relations *@
                                                <li>
                                                    <div class="treeContainer-node">
                                                        <p class="treeContainer-node-name" data-bind="click: UI.toggleRelationsVisible">
                                                            <span>Relations</span>
                                                        </p>                                    
                                                    </div>
                                                    <ul data-bind="foreach: fk.relations, visible: UI.relationsVisible">
                                                        <li>
                                                            <div class="treeContainer-node">
                                                                <p class="treeContainer-node-name">
                                                                    <span data-bind="text: attr.Name"></span>
                                                                </p>                                    
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>                                            
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div id="erd-tab-other" class="tabsContainer-tab">
                        <div class="tabsContainer-tab-header">
                            <span>Other</span>
                        </div>
                        <div class="tabsContainer-tab-body" style="height:350px;">
                            Other things...
                        </div>
                    </div>
                </div>
                <div class="tabsContainer-group">
                    @* Properties Tab *@
                    <div id="erd-tab-properties" class="tabsContainer-tab">
                        <div class="tabsContainer-tab-header">
                            <span>Properties</span>
                            <span data-bind="if: UI.isSelected" class="erd-tab-properties-selectedItem">
                                <!-- ko with: UI.selected -->
                                    <span data-bind="text: attr.Name" class="erd-tab-properties-selectedItem-name"></span>
                                    <span data-bind="text: typeName" class="erd-tab-properties-selectedItem-type"></span>
                                <!-- /ko -->
                            </span>
                        </div>
                        <div class="tabsContainer-tab-body" style="height:200px;">
                            <table class="table table-condensed table-hover">
                                <tr>
                                    <th>
                                        <span>Name</span>
                                    </th>
                                    <th>
                                        <span>Value</span>
                                    </th>
                                </tr>
                                <!-- ko foreach: UI.selectedAttributes -->
                                <tr>
                                    <td>
                                        <span data-bind="text: name"></span>
                                    </td>
                                    <td>
                                        <p data-bind="click: enterEditMode">
                                            <span data-bind="text: value, visible: !editMode()" style="width:100%;"></span>
                                        </p>
                                        <input type="text" data-bind="value: value, visible: editMode, event: { blur: exitEditMode, change: onChange }, hasFocus: editMode" />
                                    </td>
                                </tr>
                                <!-- /ko -->
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>